import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs'
import { Cell } from 'zarm';
import { useHistory } from 'react-router';
import CustomIcon from '../CustomIcon';
import {typeMap} from '@/utils'
import s from './style.module.less'

const BillItem = ({bill}) => {
  console.log(bill);
  const [income, setIncome] = useState(0)
  const [expense, setExpense] = useState(0)
  const histroy = useHistory()

  useEffect(()=>{
    const _income = bill.bills.filter(i => i.pay_type == 2).reduce((curr, item) => {
      curr += Number(item.amount);
      return curr;
    }, 0);
    setIncome(_income);
    const _expense = bill.bills.filter(i => i.pay_type == 1).reduce((curr, item) => {
      curr += Number(item.amount);
      return curr;
    }, 0);
    setExpense(_expense);
  }, [bill.bills])

  const getToDetail = (item)=>{
    histroy.push('/detail?id='+item.id)
  }

  return <div className={s.item}>
    <div className={s.headerDate}>
      <div className={s.date}>{bill.date}</div>
      <div className={s.money}>
        <span>
          <img src="//s.yezgea02.com/1615953405599/zhi%402x.png" alt=""/>
          <span>¥{expense.toFixed(2)}</span>
        </span>
        <span>
          <img src="//s.yezgea02.com/1615953405599/shou%402x.png" alt=""/>
          <span>¥{income.toFixed(2)}</span>
        </span>
      </div>
    </div>
    {
      bill && bill.bills.map(item => <Cell
        className={s.bill}
        key = {item.id}
        onClick= {()=>getToDetail(item)}
        title= {
          <>
            <CustomIcon className={s.itemIcon} type={item.type_id? typeMap[item.type_id].icon: 1}></CustomIcon>
            <span>{item.type_name}</span>
          </>
        }
        description={<span style={{color: item.pay_type ==2?'red': '#39be77'}}>{`${item.pay_type == 1 ? '-' : '+'}${item.amount}`}</span>}
        help={<div>{dayjs(item.date).format('HH:mm')} {item.remark ? `| ${item.remark}` : ''}</div>}
      ></Cell>)
    }
  </div>
}

BillItem.protTypes = {
  bill: PropTypes.object
}

export default BillItem